window.addEventListener('load', function () {
    // 获取事件
    var oll = document.querySelector('ol');
    var ul = document.querySelector('ul');
    var li = document.querySelector('.screen li')


    // 创建小正方形 根据ul孩子的长度来创建小正方形
    for (var i = 0; i < ul.children.length; i++) {
        var lis = document.createElement('li');
        // 把数字填入到新建的li里
        lis.innerHTML = i + 1;
        // 记录索引号
        lis.setAttribute('index', i);
        // 把新建li并带有值的li放入ol
        oll.appendChild(lis);

        lis.addEventListener('click', function () {
            // 排他
            for (var j = 0; j < oll.children.length; j++) {
                oll.children[j].style.color = '';
            }
            this.style.color = 'red';
            // 获取点击索引
            var index = this.getAttribute('index');
            num = circle = index;
            var liw = li.offsetWidth;
            // 调用动画函数
            animate(ul, -index * liw,);

        });


    }
})
